<template>
<div>
  <el-input v-model="name" placeholder="请输入用户姓名" style="width: 200px; margin-left: -550px;"></el-input>
  <el-input v-model="phone" placeholder="请输入用户电话" style="width: 200px; margin-left: 5px;"></el-input>
  <el-button type="primary" plain style="margin-left: 5px;" @click="search">查询</el-button>
  <el-button type="success" plain style="margin-left: 5px;" @click="save" >新增</el-button>
  <el-table
      ref="multipleTable"
      :data="customerTableData"
      tooltip-effect="dark"
      style="width: 100%;"
      @cell-mouse-enter="navigatorEdit">
    <el-table-column type="expand">
      <el-table
          ref="multipleTable"
          :data="addressTableData"
          tooltip-effect="dark"
          style="width: 100%;">
        <el-table-column
            prop=""
            label=""
            width="100">
        </el-table-column>
        <el-table-column
            prop="customer.name"
            label="用户姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address.province"
            label="省"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address.city"
            label="市"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address.district"
            label="区"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address.detailedAddress"
            label="详细地址">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit1(scope.row)">Edit</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete1(scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
  </el-table-column>
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="用户电话"
        width="120">
    </el-table-column>
    <el-table-column
        prop="name"
        label="用户名称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="orderPhone"
        label="订购电话"
        width="120">
    </el-table-column>
    <el-table-column
        prop="customerStar.grade"
        label="用户星级"
        width="180">
    </el-table-column>
    <el-table-column
        prop="monthUsage"
        label="月度用量"
        width="120">
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注"
        width="120">
    </el-table-column>
    <!--      //删除修改按钮-->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.row)">Edit</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--    分页栏-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
  <!--新增对话框-->
  <el-dialog title="新增用户信息"  :visible.sync="dialogFormVisible" @close="clearForm" center>
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="用户电话" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="form.phone" autocomplete="off" placeholder="请输入用户电话"></el-input>
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="pass" >
        <el-input v-model="form.pass" autocomplete="off" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>
      <el-form-item label="订购电话" :label-width="formLabelWidth" prop="orderPhone">
        <el-input v-model="form.orderPhone" autocomplete="off" placeholder="请输入订购电话"></el-input>
      </el-form-item>
      <el-form-item label="客户星级" :label-width="formLabelWidth" prop="customerStarId">
        <el-select v-model="form.customerStarId" placeholder="请选择客户星级">
          <el-option
              v-for="item in customerStarDate"
              :key="item.id"
              :label="item.grade"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月度用量" :label-width="formLabelWidth" prop="monthUsage" >
        <el-input v-model="form.monthUsage" autocomplete="off" placeholder="月度用量" readonly></el-input>
      </el-form-item>
      <el-form-item label="请选择所在省" :label-width="formLabelWidth" prop="province">
        <el-select v-model="form.province" clearable placeholder="请选择省">
          <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择所在市" :label-width="formLabelWidth" prop="city">
        <el-select v-model="form.city" clearable placeholder="请选择市" >
          <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择所在区" :label-width="formLabelWidth" prop="district">
        <el-select v-model="form.district" clearable placeholder="请选择区">
          <el-option
              v-for="item in districtList"
              :key="item.id"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请输入详细地址" :label-width="formLabelWidth" prop="detailedAddress">
        <el-input v-model="form.detailedAddress" autocomplete="off" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="form.remark">
      </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="ensure">确 定</el-button>
    </div>
  </el-dialog>
<!--  编辑对话框-->
  <el-dialog title="编辑用户信息"  :visible.sync="dialogFormVisible1" @close="clearForm" center>
    <el-form :model="form1" :rules="rules" ref="ruleForm">
      <el-form-item label="用户电话" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="form1.phone" autocomplete="off" placeholder="请输入用户电话"></el-input>
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form1.name" autocomplete="off" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="pass" >
        <el-input v-model="form1.pass" autocomplete="off" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>
      <el-form-item label="订购电话" :label-width="formLabelWidth" prop="orderPhone">
        <el-input v-model="form1.orderPhone" autocomplete="off" placeholder="请输入订购电话"></el-input>
      </el-form-item>
      <el-form-item label="客户星级" :label-width="formLabelWidth" prop="customerStarId">
        <el-select v-model="form1.customerStarId" placeholder="请选择客户星级">
          <el-option
              v-for="item in customerStarDate"
              :key="item.id"
              :label="item.grade"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月度用量" :label-width="formLabelWidth" prop="monthUsage" >
        <el-input v-model="form1.monthUsage" autocomplete="off" placeholder="月度用量" readonly></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form1.remark">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="ensure1">确 定</el-button>
    </div>
  </el-dialog>
  <!--编辑用户对应地址对话框-->
  <el-dialog title="地址信息"  :visible.sync="dialogFormVisible2" @close="clearForm" center>
    <el-form :model="forms" :rules="rules" ref="ruleForm">
      <el-form-item label="省" :label-width="formLabelWidth" prop="province1">
        <el-input v-model="forms.province" autocomplete="off" placeholder="请输入省名称"></el-input>
      </el-form-item>
      <el-form-item label="市" :label-width="formLabelWidth" prop="city1">
        <el-input v-model="forms.city" autocomplete="off" placeholder="请输入市名称"></el-input>
      </el-form-item>
      <el-form-item label="区" :label-width="formLabelWidth" prop="district1">
        <el-input v-model="forms.district" autocomplete="off" placeholder="请输入区名称"></el-input>
      </el-form-item>
      <el-form-item label="详细地址" :label-width="formLabelWidth" prop="detailedAddress1">
        <el-input v-model="forms.detailedAddress" autocomplete="off" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="forms.remark">
      </el-input>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="ensure2">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
export default {
  name: "customer",
  data() {
    let validatePhone=(rule, value, callback)=>{
      if(/^(13[0-9]|14[5|7]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(value)){
        callback();
      }else {
        callback(new Error('请输入合法的电话号码'));
      }
    }
        let validateOrderPhone=(rule, value, callback)=>{
      if(/^(13[0-9]|14[5|7]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(value)){
        callback();
      }else {
        callback(new Error('请输入合法的电话号码'));
      }
    }
    return {
      name: '',
      phone: '',
      curPage: 1,
      pageSize: 5,
      total: 0,
      customerTableData: [],
      addressTableData: [],
      addressTableDataId:[],
      form: {
        id:'',
        phone: '',
        name: '',
        pass: '',
        orderPhone: '',
        customerStarId: '',
        monthUsage:0,
        remark:'',
        province:'',
        city:'',
        district:'',
        detailedAddress:'',
      },
      form1: {
        id:'',
        phone: '',
        name: '',
        pass: '',
        orderPhone: '',
        customerStarId: '',
        monthUsage:0,
        remark:'',
      },
      forms:{
        id:'',
        province:'',
        city:'',
        district:'',
        detailedAddress:'',
        remark:''
      },
      dialogFormVisible2:false,
      dialogFormVisible1:false,
      formLabelWidth: '120px',
      dialogFormVisible: false,
      customerStarDate: [],
      provinceList:[
        {
          id:1,
          name:'陕西省'
        }
      ],
      cityList:[
        {
          id:1,
          name:'西安市'
        }
      ],
      districtList:[
        {
          id:1,
          name:'雁塔区'
        },
        {
          id:2,
          name:'长安区'
        },
        {
          id:3,
          name:'未央区'
        },
        {
          id:4,
          name:'碑林区'
        },
        {
          id:5,
          name:'莲湖区'
        }
      ],
      rules:{
        phone:[
          { required: true, message: '请输入用户电话', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        name:[
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        pass:[
          { required: true, message: '请输入用户密码', trigger: 'blur' },
        ],
        orderPhone:[
          { required: true, message: '请输入订购电话', trigger: 'blur' },
          { validator: validateOrderPhone, trigger: 'blur' }
        ],
        customerStarId:[
          { required: true, message: '请选择用户星级', trigger: 'blur' },
        ],
        province:[
          { required: true, message: '请选择省份', trigger: 'blur' },
        ],
        city:[
          { required: true, message: '请选择市', trigger: 'blur' },
        ],
        district:[
          { required: true, message: '请选择区', trigger: 'blur' },
        ],
        detailedAddress:[
          { required: true, message: '请输入详细地址', trigger: 'blur' },
        ]
      },
    }
  },
  created() {
    this.init()
    this.loadCustomerStar()
  },
  methods: {
    clearForm(){
      this.form.id=''
      this.form.phone=''
      this.form.name=''
      this.form.pass=''
      this.form.orderPhone=''
      this.form.customerStarId=''
      this.form.monthUsage=0
      this.form.remark=''
      this.form.province=''
      this.form.city=''
      this.form.district=''
      this.form.detailedAddress=''
      /*this.$refs.ruleForm.resetField()*/
    },
    //加载客户星级
    async loadCustomerStar() {
      let res = await this.$axios.get('/customerStar/queryAll')
      this.customerStarDate = res.data.data
    },
    //打印用户对应得地址
    async navigatorEdit(index) {
      let res = await this.$axios.get('/customerAndAddress/queryByCustomerId', {
        params: {
          customerId: index.id
        }
      })
      this.addressTableData = res.data.data
    },
    //新增
    save() {
      this.dialogFormVisible = true
    },
    //编辑对话框按钮
    ensure1(){
      this.$refs.ruleForm.validate(async valid=> {
        if (valid) {
          let res =await this.$axios.get('/customer/modify',{
            params:this.form1
          })
          if(res.data.code===200){
            this.dialogFormVisible1=false
            this.init()
          }else {
            alert("操作失败")
          }
        } else {
          return false;
        }
      })
    },
    //对话框确定按钮
    ensure() {
      this.$refs.ruleForm.validate(async valid=> {
        if (valid) {
          console.log(this.form)
          let res =await this.$axios.get('/customer/save',{
            params:this.form
          })
          if(res.data.code===200){
            this.dialogFormVisible=false
            this.init()
          }else {
            alert("操作失败")
          }
        } else {
          return false;
        }
      })
    },
    //多条件查询
    search() {
      this.curPage = 1
      this.init()
    },
    //编辑
    async handleEdit(row) {
      this.dialogFormVisible1 = true
      this.form1.id = row.id
      this.form1.phone = row.phone
      this.form1.name = row.name
      this.form1.pass = row.pass
      this.form1.orderPhone = row.orderPhone
      this.form1.customerStarId = row.customerStar.id
      this.form1.monthUsage = row.monthUsage
      this.form1.remark = row.remark
    },
    //删除
    async handleDelete(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$axios.get('/customer/drop?id=' + row.id)
        if (res.data.code === 200 ) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.curPage = 1
          this.init()
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //多条件分页查询
    async init() {
      let res = await this.$axios.get('/customer/queryByPage', {
        params: {
          name: this.name,
          phone: this.phone,
          curPage: this.curPage,
          pageSize: this.pageSize
        }
      })
      this.customerTableData = res.data.data
      this.total = res.data.total
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.init()

    },
    handleCurrentChange(val) {
      this.curPage = val
      this.init()
      // console.log(`当前页: ${val}`);
    },
    //删除用户对应地址
    async handleDelete1(row) {
      this.$confirm('此操作将永久删除该仓库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res=await this.$axios.get('/address/drops?id='+row.id)
        if(res.data.code===200){
          //alert(111)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.curPage=1
          this.init()
        }else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      /*console.log(row);*/
    },
    //编辑
    handleEdit1(row){
      console.log(row)
      this.forms.id=row.address.id
      this.forms.province=row.address.province
      this.forms.city=row.address.city
      this.forms.district=row.address.district
      this.forms.detailedAddress=row.address.detailedAddress
      this.forms.remark=row.address.remark
      this.dialogFormVisible2=true
    },
    //编辑对话框确定按钮
    async ensure2(){
      this.$refs.ruleForm.validate(async valid=> {
        if (valid) {
          let res=await  this.$axios.get('/address/update',{
            params:this.forms
          })
          if(res.data.code===200){
            this.dialogFormVisible2=false
            this.init()
          }else {
            alert("操作失败")
          }
        } else {
          /*console.log('error submit!!');*/
          return false;
        }
      })
    },
  }
}
</script>

<style scoped>

</style>